<template>
  <d2-container>
    <template slot="header">
      <div style="display: flex;width: 100%">
        <div class="search" style="display: flex;justify-content: space-around;width: 65%;">
          <div class="search_box" style="display: flex;justify-content: space-around;width: 100%">
            <div style="width: 20%">
              <el-input v-model="order.order_id" placeholder="请输入订单ID" ></el-input>
            </div>
            <div style="width: 20%">
              <el-input v-model="order.uid" placeholder="请输入用户Id"></el-input>
            </div>
            <div style="width: 20%">
              <el-input v-model="order.hid" placeholder="请输入房Id"></el-input>
            </div>
            <div style="width: 20%">
              <el-input v-model="order.roomid" placeholder="请输入房间ID" ></el-input>
            </div>
          </div>
          <div class="search_button" style="width: 20%">
            <el-button type="primary" style="width: 100%" @click="search_info">点击查询</el-button>
          </div>
          <div>
            <el-button type="primary" style="margin-left: 20px" @click="Refresh">点击刷新页面</el-button>
          </div>
        </div>
        <div>
          <el-button type="primary" style="margin-left: 20px" @click="addOrder">点击添加数据</el-button>
        </div>
      </div>
    </template>
    <template>
      <el-table
              :data="tableData"
              style="min-width: 100%">
        <el-table-column
                prop="order_id"
                label="订单Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="uid"
                label="用户Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="hid"
                label="房Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="roomid"
                label="房间Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="owe"
                label="月租"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="pay_money"
                label="是否付款"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.pay_money == 1 ? '已付款':'未付款' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="order_state"
                label="是否签约"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.order_state == 1 ? '已签约':'未签约' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="first_time"
                label="合同开始时间"
                align = "center"
                >
          <template slot-scope = "scope">
            {{ new Date(parseInt(scope.row.first_time)) | moment('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column
                prop="last_time"
                label="合同结束时间"
                align = "center">
          <template slot-scope = "scope">
            {{ new Date(parseInt(scope.row.last_time)) | moment('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column
                prop="create_time"
                label="订单生成时间"
                align = "center">
          <template slot-scope = "scope">
            {{ new Date(parseInt(scope.row.create_time)) | moment('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column
                prop="address"
                label="操作"
                width="150px"
                align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editOrder(scope.row.order_id)">编辑</el-button>
            <el-button @click="deleteOrder(scope.row.order_id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>


    <template slot="footer">
      <template>
        <div class="block">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
          </el-pagination>
        </div>
      </template>
    </template>

    <!--添加订单 弹框-->
    <el-dialog
            title="添加订单"
            :visible.sync="addOrderDialog"
            align="center"
    >
      <el-form ref="form" :model="addorder" label-width="70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="用户Id">
                <el-input v-model="addorder.uid"></el-input>
              </el-form-item>
              <el-form-item label="房Id">
                <el-input v-model="addorder.hid"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="房间Id">
                <el-input v-model="addorder.roomid"></el-input>
              </el-form-item>
              <el-form-item label="月租">
                <el-input v-model="addorder.owe"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否付款">
              <el-radio-group v-model="addorder.pay_money">
                <el-radio :label="1">已付款</el-radio>
                <el-radio :label="0">未付款</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否签约">
              <el-radio-group v-model="addorder.order_state">
                <el-radio :label="1">已签约</el-radio>
                <el-radio :label="0">未签约</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同开始时间" label-width="100px">
              <div class="block">
                <el-date-picker
                        v-model="addorder.first_time"
                        type="date"
                        placeholder="选择日期"
                        @change="startDateChange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="timestamp">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束时间" label-width="100px">
              <div class="block">
                <el-date-picker
                        v-model="addorder.last_time"
                        type="date"
                        placeholder="选择日期"
                        @change="endDateChange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="timestamp">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="confirmAdd">确认添加</el-button>
              <el-button @click="addOrderDialog= false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <!--编辑订单 弹框-->
    <el-dialog
            title="添加订单"
            :visible.sync="editOrderDialog"
            align="center"
    >
      <el-form ref="form" :model="editorder" label-width="70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="用户Id">
                <el-input v-model="editorder.uid"></el-input>
              </el-form-item>
              <el-form-item label="房Id">
                <el-input v-model="editorder.hid"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="房间Id">
                <el-input v-model="editorder.roomid"></el-input>
              </el-form-item>
              <el-form-item label="月租">
                <el-input v-model="editorder.owe"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否付款">
              <el-radio-group v-model="editorder.pay_money">
                <el-radio :label="1">已付款</el-radio>
                <el-radio :label="0">未付款</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否签约">
              <el-radio-group v-model="editorder.order_state">
                <el-radio :label="1">已签约</el-radio>
                <el-radio :label="0">未签约</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同开始时间" label-width="100px">
              <div class="block">
                <el-date-picker
                        v-model="editorder.first_time"
                        type="date"
                        placeholder="选择日期"
                        @change="startDateChange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="timestamp">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束时间" label-width="100px">
              <div class="block">
                <el-date-picker
                        v-model="editorder.last_time"
                        type="date"
                        placeholder="选择日期"
                        @change="endDateChange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="timestamp">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="confirmEdit">确认修改</el-button>
              <el-button @click="addOrderDialog= false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <!--删除订单 弹框-->
    <el-dialog
            title="警告！"
            :visible.sync="deleteOrderDialog"
            width="30%"
    >
      <span>数据删除后将无法恢复，是否确认删除？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="deleteOrderDialog = false">取 消</el-button>
    <el-button type="danger" @click="confirmDelete">确 定</el-button>
  </span>
    </el-dialog>
  </d2-container>
</template>

<script>
  export default {
    name: "orderManagement",
    data() {
      return {
        tableData: [],
        editOrderId: '',
        deleteOrderId: '',
        addOrderDialog: false,
        editOrderDialog: false,
        deleteOrderDialog: false,
        currentPage: 1,
        limit: 30,
        total: 50,
        order: {
          order_id: '',
          uid: '',
          hid: '',
          roomid: '',
          first_time: '',
          last_time: '',
          pay_money: '',
          owe: '',
          order_state: '',
          create_time: ''
        },
        addorder: {
          uid: '',
          hid: '',
          roomid: '',
          first_time: '',
          last_time: '',
          pay_money: '',
          owe: '',
          order_state: ''
        },
        editorder: {
          uid: '',
          hid: '',
          roomid: '',
          first_time: '',
          last_time: '',
          pay_money: '',
          owe: '',
          order_state: ''
        },
      };
    },
    async created() {
      this.getList();
    },
    methods: {
      Refresh() {
        window.location.reload();
      },
      handleSizeChange(val) {
        this.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      startDateChange(timestamp) {
        this.addorder.first_time = timestamp;
        this.editorder.first_time = timestamp;
      },
      endDateChange(timestamp) {
        this.addorder.last_time = timestamp;
        this.editorder.last_time = timestamp;
      },
      async getList() {
        try {
          const res = await this.$api.post('/order/orderList', { limit: this.limit, page: this.currentPage });
          this.total = res.data.data.count;
          console.log(this.tableData);
          this.tableData = res.data.data.rows;
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async search_info() {
        try {
          let not_null = [];
          for (let v in this.order) {
            if (this.order[v] !== '') {
              not_null.push(v);
            }
          }
          if (not_null.length > 0) {
            const res = await this.$api.post('/order/orderList', {
              order_id: this.order.order_id,
              uid: this.order.uid,
              hid: this.order.hid,
              roomid: this.order.roomid,
              limit: this.limit,
              page: this.currentPage
            });
            if(res.data.state == 1){
              for(let v in this.order) {
                this.order[v] = '';
              }
              this.$message({ message: '查询成功！', type: 'success' });
              this.tableData = res.data.data.rows;
            }else {
              this.$message.error('查询失败！');
              this.getList();
            }
          } else {
            this.$message.error('请至少输入一个字段进行查询！')
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },

      addOrder() {
        for (let v in this.addorder) {
          this.addorder[v] = '';
        }
        this.addOrderDialog = true;
      },
      async confirmAdd() {
        try {
          let is_null = [];
          for (let v in this.addorder) {
            if (this.addorder[v] === '') {
              is_null.push(v);
            }
          }
          if (is_null.length === 0) {
            const res = await this.$api.post('/order/addOrder', this.addorder);
            if (res.data.state == 1) {
              this.$message({ message: '添加成功！', type: 'success' });
              this.addOrderDialog = false;
              this.getList();
            } else {
              this.$message.error('添加失败！');
              this.getList();
            }
          } else {
            this.$message.error('不能有数据为空！');
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async editOrder(order_id)  {
        try {
          this.editOrderId = order_id;
          const res = await this.$api.post('/order/getorderbyId', { order_id });
          if (res.data.state == 1) {
            const { uid,
                    hid,
                    roomid,
                    owe,
                    pay_money,
                    order_state ,
                    first_time,
                    last_time } = res.data.data;
            this.editorder = { uid,
                               hid,
                               roomid,
                               owe,
                               pay_money,
                               order_state ,
                               first_time,
                               last_time };
            this.editOrderDialog = true;
          } else {
            this.$message.error('获取当前数据失败！');
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async confirmEdit() {
        try {
          let is_null = [];
          for (let v in this.editorder) {
            if (this.editorder[v] === '' ) {
              is_null.push(v);
            }
          }
          if (is_null.length === 0) {
            this.editorder.order_id = this.editOrderId;
            const res =  await this.$api.post('/order/updateOrder', this.editorder);
            console.log(res);
            if (res.data.state == 1) {
              this.editOrderDialog = false;
              this.$message({ message: '修改成功！', type: 'success' });
              this.getList();
            }else {
              this.editOrderDialog = false;
              this.$message.error('修改失败！')
            }
          } else {
            this.$message.error('不能有数据为空！');
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      deleteOrder(order_id) {
        this.deleteOrderId = order_id;
        this.deleteOrderDialog = true
      },
      async confirmDelete() {
        try {
          const res = await this.$api.post('/order/delOrder', { order_id: this.deleteOrderId });
          if (res.data.state === 1) {
            this.deleteOrderDialog = false;
            this.$message({ message: '删除成功！',type: 'success' });
            this.getList();
          }
          else {
            this.deleteOrderDialog = false;
            this.$message.error('删除失败！');
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
    }
  }
</script>

<style scoped>

</style>
